<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可点科技（KE POINTS）</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/carousel.css" rel="stylesheet">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header div{
            width: 100%;
            min-width: 1200px;
            height: 489px;
            background: url("../img/tech_index.jpg") top center no-repeat;
            background-size: 100% 100%;
        }
        footer{
            background: #333;
            padding-top: 30px;
            color: white;
        }
        .footContact{
            text-align: center;
            margin-top: 30px;
            margin-bottom: 0px;
        }
        .footer-row{
            display: flex;
        }
        .server-5{
            width: 450px;
        }
        .main{
            padding: 40px 0;
            background: rgba(242, 242, 242, 1);
        }
        .main h1{
            text-align: center;
        }
        .main .info{
            width: 1200px;
            margin: 0 auto;
            margin-top: 40px;
            display:flex ;
            flex-wrap: wrap;
            justify-content: center;
        }
        .main .info div{
            width: 250px;
            height: 200px;
            margin: 0px 50px;
            text-align: center;
            line-height: 200px;
            background: white;
            border:1px solid #cccccc;
            margin-bottom: 25px;
        }
        .navbar{
            margin-bottom: 0;
        }
        .navbar-wrapper{
            transition: 0.5s;
        }
        .axure-index{
            color: black;
            font-size: 24px;
        }
        .axure-index:hover{
            color: black;
        }
        .list-logo>div{
            text-align: center;
        }
        .list-logo>div>h2{
            font-size: 14px;
        }
        .list-steps span{
            display: inline-block;
            height: 150px;
            width: 130px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-left: 5px;
            background: lightgreen;
            margin-bottom: 5px;
        }
        .end-info h3{
            font-size: 30px;
            font-weight: 400;
        }
        .end-info p{
            width: 80%;
            margin: 10px auto;
        }
        .end-info button{
            width: 156px;
            height: 47px;
            margin-top: 25px;
        }
        .footContact{
            text-align: center;
            margin-top: 30px;
        }
        .list-steps-all span{
            transition: all 0.2s ease-in-out 0s;
        }
        .list-steps-all:hover span{
            cursor: pointer;
            box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.04);
            transform: translateY(-25px);
        }
        a:hover{
            text-decoration: none;
        }
        a{
            text-decoration: none;
        }
        .navbar-nav li a{
            color: rgba(255, 255, 255, 0.4);
        }
        .axure-index{
            color: rgba(255, 255, 255, 0.4);
        }
        .navbar-nav .active a{
            color: #fff !important;
        }
        .nav>li>a:hover{
            background: none;
            color: #fff;
        }
        .ani-img1 img,.ani-img2 img,.ani-img3 img{
            witdh: 374px;
            height: 374px;
        }
        footer{
            background: #333;
            padding-top: 30px;
            color: white;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand axure-index" href="#">可点科技</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li ><a href="./index.html">首页</a></li>
                        <li><a href="./server.html">服务</a></li>
                        <li class="active"><a href="#">技术</a></li>
                        <li><a href="./about.html">关于我们</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="./register.html">注册</a></li>
                        <li><a href="./login.html">登录</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
</div>
<header>
    <div></div>
</header>
<div class="main">
    <h1>互联网将连接一切</h1>
    <h1>数据将我们变得更理性，智能应用将生活变得便捷</h1>
    <div class="info">
        <div>JAVA</div>
        <div>PHP</div>
        <div>NODE</div>
        <div>PYTHON</div>
        <div>JAVASCRIPT</div>
        <div>OC/SWIFT</div>
        <div>HTML/CSS</div>
        <div>C/C++</div>
        <div>C#</div>
    </div>
</div>
<footer>
    <div class="footer-row" >
        <div class="server-5">
            <img class="featurette-image img-responsive center-block" data-src="holder.js/220x220" alt="Generic placeholder image">
        </div>
        <div class="server-7">
            <p>上海可点科技有限公司 版权所有2016-2018</p>
            <p>地址：xxxxxxxxxxxxxxxxxx</p>
            <p>销售热线：021-52004200 021-60530533 周一至周五9：00-18：00</p>
            <p>邮箱：ys_soft@163.com</p>
            <p>24小时手机：xxxxxxxxx</p>
        </div>
    </div>
    <p class="pull-right"><a href="#">回到顶部</a></p>
    <p class="footContact">&copy; AxureMaster by Jinni 2016 © &middot;</p>
</footer>
</body>
<script src="../js/holder.min.js"></script>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(window).scroll(function(e){
            if($(window).scrollTop()>0){
                $('.navbar-wrapper').css({
                    'background':'rgba(0, 0, 0, 0.7)',
                    'position':'fixed'
                })
            }else{
                $('.navbar-wrapper').css({
                    'background':'transparent',
                    'position':'absolute'
                })
            }
        })
    })
</script>
</html>